//页面加载完成 为按钮添加事件
//定时器模拟请求需要的时间
$(function () {
    $(".over").hide();
    $(".alert").hide();
    $("#phone").hide();
    $(".pay").hide();
    $("#btn2").click(function () {
        window.location.href="http://localhost:8080/";
    })
    $("#card").hide();
    $(".divhead1").css("color","white");
    $(".divhead5").css("color","red");
    openanimation();
    $(".alert").append(" <h1 style=\"color: white\" class='showcard'>请在下方刷卡区刷身份证</h1>");
        showcard();

    })
//刷身份证后显示身份信息
function showcard() {

    $.ajax({
        url:"CardDataQuery.do",
        type:"post",
        dataType:"json",
        success:function(data)
        {

            $(".name").text(data.AAC003);
            $(".sate").text(data.state);
            $(".IDcard").text(data.id);
           $(".addr").text(data.AAE006);
                state();
        },
        complete: function() {
            //请求完成的处理
            $("#card").show();
            $(".showcard").text("");
            $(".divhead5").css("color","white");
            $(".divhead1").css("color","red");
            closed();
        },
        error: function () {
            alert("错误")
        }
    })
}
//状态判断
function state() {
    var state=$(".sate").text();
    if(state=="正式挂失"){
        $("#btn").text("补全信息");
        $("#btn").unbind("click");
        $("#btn").click(function () {
            makecard();
            informationphone();
        })
    }
    else if (state=="OK") {
        $(".sate").text("正常")
        $("#btn").text("确认挂失")
        $("#btn").click(function () {
            guashi()
            }
        )
    }
    guashi();
}
//确认挂失事件
function guashi() {
    $("#btn").click(function () {
        openanimation();
        $.ajax({
            url:"OfficialLossCard.do",
            type:"post",
            dataType:"xml",
            success:function(data)
            {
                console.log(data);
                closed();
                card();
            },error: function () {
                alert("错误")
            }
        })
    })

}

//Open animation动画开启
function openanimation() {
    $(".over").show();
    $(".alert").show();
}
//Animation closed动画关闭
function  closed() {
    $(".over").hide();
    $(".alert").hide();
}
//显示加载动画，确认挂失
function makecard() {
    closed();
    $("#card").hide();
    $("#phone").show();
    // 改变字体颜色
    $(".divhead1").css("color","white");
    $(".divhead2").css("color","red");
    $("#btn").text("确认")
}
//补全信息页确认按钮事件验证手机号
function informationphone() {

    $("#btn").unbind("click")
    $("#btn").click(function () {
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        var phone=$(".mytxt").val();
        if(!myreg.test(phone)){
            alert("请输入正确的手机号!")
        }
        else{
            $(".divhead2").css("color","white");
            $(".divhead3").css("color","red");
            $("#phone").hide();
            $("#divbtn").html("");
            openanimation();

            setTimeout(function () { pay(); },2000);
        }
    })
}
//支付页面
function pay() {
    closed();
    $("#divbtn").html("<button class=\"button\" style=\"margin-left: 37%;width: 25%;height: 100%;margin-bottom: 20%\" id='pay'onclick='startpay()' >支付宝支付</button>")
}
//开始支付，请求二维码
function startpay() {
    openanimation();
    setTimeout(function () { code(); },2000);
}
//显示获取二维码
function code() {
    closed();
    $("#divbtn").css("text-align","center")
    $("#divbtn").html("");
    $("#divbtn").qrcode("http://www.baidu.com");
    setTimeout(function () { paydetail(); },2000);
}
//支付完成显示缴费明细
function paydetail() {
    $("#divbtn").html("");
    $(".paycode").hide();
    $(".pay").show();
    setTimeout(function () { timer(); },2000);
}
//支付完成后发送制卡指令
function goMakecard() {
    $(".divhead3").css("color","white");
    $(".divhead4").css("color","red");
    openanimation();
    $(".alert").append(" <h1 style=\"color: white\" class='gomakecard'>正在制卡，请稍候....</h1>")
    setTimeout(function (){gocard()},2000)
}
//出卡界面
function gocard() {
    openanimation();
    $(".gomakecard").text("");
    $(".alert").append(" <h1 style=\"color: white\">制卡完成请取走您的卡片</h1>")
    setTimeout(function (){
        window.location.href="http://localhost:8080"
    },2000)
}
//failuretime支付码失效时间

function timer()
{
    setTimeout(function (){goMakecard()},2000)
   // setTimeout(function () {
   //     window.location.href="http://localhost:8080/";
   // },60000)

}
//进入补全信息界面
function enterinformation() {
    $("#card").hide();
    closed();
    $("#phone").show();
    // 改变字体颜色
    $(".divhead1").css("color","white");
    $(".divhead2").css("color","red");
    $("#btn").text("确认");
    informationphone();

}
//二次点击补全信息 进入补全信息页
function onceagin() {
    $("#phone").hide();
    $(".mytxt").val("");
    $(".divhead2").css("color","white");
    $(".divhead1").css("color","red");
    $("#btn2").unbind("click")
    $("#btn2").click(function () {
        window.location.href="http://localhost:8080"
    })
    $("#card").show();
    $("#btn").text("补全信息")
    $("#btn").unbind("click")
    $("#btn").click(function () {
        enterinformation();
    })
}
//开启补卡流程
function card() {
    //显示加载动画,确认挂失
        makecard();
    //补全信息页确认按钮事件验证手机号
        enterinformation();
    // 清除取消按钮原来的事件
    $("#btn2").unbind("click")
    // 添加新的事件，返回确认信息
    $("#btn2").click(function () {
        onceagin()

    })
    //开启摄像头拍照
    function cemera() {
        var w = 320, h = 240;
        var pos = 0, ctx = null, saveCB, image = [];

        var canvas = document.createElement("canvas");
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);

        console.log(canvas.toDataURL);
        if (canvas.toDataURL) {

            ctx = canvas.getContext("2d");

            image = ctx.getImageData(0, 0, w, h);

            saveCB = function(data) {

                var col = data.split(";");
                var img = image;

                for(var i = 0; i < w; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;
                    img.data[pos + 1] = (tmp >> 8) & 0xff;
                    img.data[pos + 2] = tmp & 0xff;
                    img.data[pos + 3] = 0xff;
                    pos+= 4;
                }

                if (pos >= 4 * w * h) {
                    ctx.putImageData(img, 0, 0);
                    /* $.post("servlet/CatD", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){
                        console.log("===="+eval(msg));
                        pos = 0;
                        $("#img").attr("src", msg+"");
                    }); */
                    $.ajax({
                        type: "post",
                        url: "servlet/CatD?t="+new Date().getTime(),
                        data: {type: "pixel", image: canvas.toDataURL("image/png")},
                        dataType: "html",
                        success: function(data){
                            console.log("===="+data);
                            pos = 0;
                            $("#img").attr("src", "");
                            $("#img").attr("src", data);
                        }
                    });
                }
            };

        } else {

            saveCB = function(data) {
                image.push(data);

                pos+= 4 * w;

                if (pos >= 4 * w * h) {
                    /* $.post("servlet/CatD", {type: "pixel", image: image.join('|')}, function(msg){
                        console.log("+++++"+eval(msg));
                        pos = 0;
                        $("#img").attr("src", msg+"");
                    }); */

                    $.ajax({
                        type: "post",
                        url: "servlet/CatD",
                        data: {type: "pixel", image: image.join('|')},
                        dataType: "json",
                        success: function(data){
                            console.log("+++++"+eval(msg));
                            pos = 0;
                            $("#img").attr("src", msg+"");
                        }
                    });
                }
            };
        }

        $("#webcam").webcam({
            width: w,
            height: h,
            mode: "callback",
            swffile: "js/jscam_canvas_only.swf",
            onSave: saveCB,
            onCapture: function () {
                webcam.save();
            },
            debug: function (type, string) {
                console.log(type + ": " + string);
            }
        });
    }
}

